<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<%
String path = request.getContextPath();
%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Expires" CONTENT="0"> 
<meta http-equiv="Cache-Control" CONTENT="no-cache"> 
<meta http-equiv="Pragma" CONTENT="no-cache">
<title>温江人大代表之家</title>
<link href="<%=path%>/css/main.css" rel="stylesheet" type="text/css">
<link href="<%=path%>/css/imgareaselect/animated.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="<%=path %>/js/main.js"></script>
<script type="text/javascript" src="<%=path %>/js/jquery1.4.2.js"></script>
<script type="text/javascript" src="<%=path %>/js/imgareaselect/imgareaselect.js"></script>

<s:if test="state">
<script language="javascript">
var result = new Object();
result.src = "${relativePath}?uuid=${uuid }";
self.parent.returnValue=result;
self.parent.close();
</script>
</s:if>
<s:else>
<script type="text/javascript">
 /**
 *初始图片原剪切对象
 */
 ImgCut = function(sii,vci){
    this.srcImg = $("#"+sii);
    this.srcWidth;
    this.srcHeight;
    this.vci = vci;
    this.vciWidth;
    this.vciHeight;
    this.vii = vci + "Img";
    this.cutObj;
 }
 /**
 *生成预览图片
 */
 ImgCut.prototype.makeViewImg=function(){
    var viewImg = $("<img>");
    viewImg.attr("src",this.srcImg.attr("src"));
    viewImg.attr("id",this.vii);
    viewImg.attr("width",this.srcWidt+'px');
    viewImg.attr("height",this.srcHeight+'px');
    return viewImg;
 }
 /**
 *生成图片剪切选择及预览图片
 */ 
 ImgCut.prototype.init=function(minWidth,minHeight,maxWidth,maxHeight,previewWidth,previewHeight,x1,y1,x2,y2){
    //源图片宽度
    this.srcWidth = this.srcImg.attr("width");
    //源图片高度
    this.srcHeight = this.srcImg.attr("height");
    //设置剪切图片预览宽高
    this.vciWidth = previewWidth == 0 ? maxWidth : previewWidth;
    this.vciHeight = previewHeight == 0? maxHeight : previewHeight;
    //生成预览图片
    $("#"+this.vci).append(this.makeViewImg());
    //设置显示预览图片容器样式
    $("#"+this.vci).css({'width':this.vciWidth,'height':this.vciHeight,'overflow':'hidden'});
    //构造图片剪切选择区域
    var cutObj = this.srcImg.imgAreaSelect({
        //设置框的添加效果 
        fadeSpeed:200,
        //拖动选择框
        handles:true,
        //最小选择区
        minWidth:minWidth,
        minHeight:minHeight,
        //最大选择区
        maxWidth:maxWidth,
        maxHeight:maxHeight,
        //改变缩放
        resizable:false,
        //只能移动当前选择框
        persistent:true,
        //显示选择区
        show:true,
        //是否采用api 
        instance: true,
        //设置初始函数 画出选择框 
        onInit:function(srcImg, cutImg){
         cutObj.setSelection(x1, y1, x2, y2, true);
         cutObj.update();
         var pci = $("#PCI");
         var width = pci.width();
         var height = pci.height();
         var scaleX = width / x2;
         var scaleY = height / y2;
         $("#PCIImg").css({"width": Math.round(scaleX * srcImg["width"])+'px',
            "height": Math.round(scaleY * srcImg["height"])+'px',
            "marginLeft": '-'+Math.round(scaleX * x1)+'px',
            "marginTop": '-'+Math.round(scaleY * y1)+'px'});
        }, 
        //选择移动处理函数
        onSelectChange:function(srcImg,cutImg){
         var pci = $("#PCI");
         var width = pci.width();
         var height = pci.height();
         var scaleX = width / cutImg.width;
         var scaleY = height / cutImg.height;
         $("#PCIImg").css({"width": Math.round(scaleX * srcImg["width"])+'px',
            "height": Math.round(scaleY * srcImg["height"])+'px',
            "marginLeft": '-'+Math.round(scaleX * cutImg.x1)+'px',
            "marginTop": '-'+Math.round(scaleY * cutImg.y1)+'px'}); 
       }
    });
    this.cutObj = cutObj;
 }
 
 /**
 *保存切片图片
 */
 ImgCut.prototype.save=function(formid,params){
     var cutImg = this.cutObj.getSelection(true); 
     var field = {"x1":cutImg["x1"],
                  "y1":cutImg["y1"],
                  "x2":cutImg["x2"],
                  "y2":cutImg["y2"],
                  "destWidth":cutImg["width"],
                  "destHeight":cutImg["height"]};
    $.extend(field,params);
    var arg = ""; 
    $.each(field,function(key,val){
         arg += ((arg.indexOf("?") < 0 ? "?" : "&") + key + "=" + val);
    }) 
    var uploadForm = $("#"+formid);
    uploadForm.attr("action",uploadForm.attr("action") + arg);
    uploadForm.submit();
 }
 
 $(document).ready(function () {
    var width = "${width}";
    var height = "${height}";
    var path = "${path}";
    var destWidth = "${destWidth }"; 
    var destHeight = "${destHeight }"; 
    var previewWidth = "${previewWidth }";
    var previewHeight = "${previewHeight }";
    var prefix = "${prefix}";
    var x1 = "${x1 }";
    var y1 = "${y1 }";
    var x2 = "${x2 }";
    var y2 = "${y2 }";
    var fileExt = "${fileExt}";
    var minSize = "${minSize }";
    var maxSize = "${maxSize }";
    var isImg = "${isImg }";
    var cover = "${cover}";
    //图片剪切对象
    var cutObj=new ImgCut("srcImg","PCI");
    //初始图片剪切选择框及预览图片,等资源图片装载完成后执行
    cutObj.init(destWidth,destHeight,destWidth,destHeight,previewWidth,previewHeight,x1,y1,x2,y2);
    var params={"width":width,"height":height,"path":path,"prefix":prefix,
                "fileExt":fileExt,"minSize":minSize,"maxSize":maxSize,"isImg":isImg,"cover":cover}; 
    //监听保存事件 
    $("#SCI").click(function(){
       cutObj.save("UploadForm",params);
    });
  });
  
</script>
</s:else>
</head>
<body scroll="no">
<table width="100%" border="0"  cellpadding="2" cellspacing="0" style="border:1px solid #8aacc8">
<tr>
 <td bgcolor="#F5F9FC"><table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr>
  <td valign="top" style=" padding:20px 40px 20px 40px" ><li>右图为本平台上展示时的标准大小,请查看右图是否最终显示的图片,
  如果不是请拖动左图上的矩形框自定义图片,拖动矩形框后右图会同步生成最终显示的预览图片,确定生成的预览图片后点击[保存图片]按钮完成图片上传。</li>
  <br><li>如果左图上的矩形框不能拖动则表明你上传的图片已经符合本平台图片要求的大小,直接点击[保存图片]按钮完成图片上传。</li></td>
 </tr>
 <tr>
  <td align="center">
   <s:form name="UploadForm" id="UploadForm" action="/permit/upload/Cut.do" method="post">
   <table>
    <tr>
      <td align="center">左图</td>
      <td></td>
      <td align="center">右图</td>
    </tr>
    <tr>
    <td align="center"><div id="s"><img src="<%=path %>${relativePath }?uuid=${uuid }" width="${width }px" height="${height }px" id="srcImg"></img></div></td>
    <td></td>
    <td align="center"><div id="PCI" ></div></td>
    </tr>
    <tr></tr>
    <tr>
    <td colspan="4" align="center">
     <div><input type="button" id="SCI" value="保存图片"/></div> 
    </td>
    </tr>
   </table>
   <s:hidden name="relativePath"></s:hidden>
   </s:form>
  </td>
 </tr>
 </table>
 </td>
 </tr>
 </table>
<script type="text/javascript">
function UploadPhoto(){
	//document.getElementById("waitstr").innerText = "正在上传照片，请您稍候...";
	//showWaitMsg();
	document.UploadForm.submit();
}

</script>
</body>
</html>
